<script setup lang="ts">
import ResourceFormPanel from './ResourceFormPanel.vue'
import { ResourceApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useDictOptions, useRequest, useTable } from '@/hooks'

defineOptions({ name: 'Resource' })

const queryForm = reactive<ResourceApi.ResourceQuery>({
  module: undefined,
  keyword: undefined,
})

// 资源模块列表
const {
  loading: treeLoading,
  response: treeData,
} = useRequest(() => {
  const data = useDictOptions('ResourceModule').map((item) => {
    return {
      id: item.value,
      title: item.label,
    }
  })
  return Promise.resolve(data)
})

// 资源模块
const {
  tableData: dataList,
  loading,
  search,
  handleDelete,
} = useTable(() => ResourceApi.getList(queryForm))

// 根据选中模块查询
const selectedModule = ref<any>()
const onTreeNodeSelect = (key: string, node: any) => {
  selectedModule.value = node
  queryForm.module = key
  search()
}

const columns: TableInstanceColumns[] = [
  // { title: 'id, dataIndex: 'id', slotName: 'id' },
  { title: '资源名称', dataIndex: 'name', slotName: 'name' },
  { title: '资源编码', dataIndex: 'code', slotName: 'code' },
  { title: '所属模块', dataIndex: 'module', slotName: 'module' },
  { title: '描述', dataIndex: 'description', slotName: 'description', ellipsis: true },
]

// 删除
const onDelete = (item: ResourceApi.ResourceResp) => {
  return handleDelete(() => ResourceApi.remove(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

const ResourceFormPanelRef = ref<InstanceType<typeof ResourceFormPanel>>()
// 新增
const onCreate = () => {
  ResourceFormPanelRef.value?.create(queryForm.module)
}
// 详情
const onDetail = (row) => {
  ResourceFormPanelRef.value?.open(row.id)
}

// 排序
const onChange = async (newData) => {
  try {
    const data = {
      module: queryForm.module,
      resourceIds: newData.map(item => item.id),
    }
    loading.value = true
    await ResourceApi.sortResource(data)
    search()
  } finally {
    loading.value = false
  }
}

// 全选管理
const router = useRouter()
const onManagePermission = () => {
  router.push({ path: '/system/orgination/permission' })
}
</script>

<template>
  <ProPage title="资源配置" description="管理系统资源，通过对角色绑定资源实现权限判断" flex-table>
    <TreeTableLayout>
      <template #left>
        <ListTree
          :loading="treeLoading"
          :data="treeData"
          @select="onTreeNodeSelect"
        >
          <template #extra>
            <a-button v-permission="['system:resource:manage']" type="primary" class="ml">
              <icon-plus />
            </a-button>
          </template>
        </ListTree>
      </template>
      <template #right>
        <ProTable
          row-key="id"
          :data="dataList"
          :columns="columns"
          :loading="loading"
          :pagination="false"
          :draggable="{ type: 'handle', width: 40 }"
          @refresh="search"
          @row-click="onDetail"
          @change="onChange"
        >
          <template #toolbar-left>
            <a-input v-model="queryForm.keyword" placeholder="资源名称、编码" allow-clear @change="search">
              <template #prefix>
                <icon-search />
              </template>
            </a-input>
          </template>
          <template #toolbar-right>
            <a-button v-permission="['system:resource:manage']" type="text" size="medium" @click="onManagePermission">
              <span>权限管理</span>
            </a-button>
            <a-button v-permission="['system:resource:manage']" type="primary" @click="onCreate">
              <template #icon>
                <icon-plus />
              </template>
              <span>添加资源</span>
            </a-button>
          </template>
          <template #code="{ record }">
            <a-typography-text copyable>
              {{ record.code }}
            </a-typography-text>
          </template>
          <template #module="{ record }">
            <CellDict :value="record.module" code="ResourceModule" />
          </template>
          <template #action="{ record }">
            <a-space>
              <a-link v-permission="['system:resource:manage']" status="danger" @click="onDelete(record)">
                删除
              </a-link>
            </a-space>
          </template>
        </ProTable>
      </template>
    </TreeTableLayout>
    <ResourceFormPanel ref="ResourceFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
